<!--遥感图像管理模块-->
<template>
  <div class="goods wrapper">
    <div class="role-operate">
      <el-button size="mini" type="primary" @click="showDialog = true">添加图片</el-button>
    </div>
    <div class="bd">
      <ul class="image-list">
        <li v-for="v in pic_list" :key="v.id" class="image-item">
          <!-- 修改图片容器结构 -->
          <div class="pic-container">
            <div class="pic" @click="handleZoom(v.url)">
              <img :src="v.url" alt="">
            </div>
            <!-- 固定显示在图片下方的名称 -->
            <div class="image-name ellipsis">{{ v.name }}</div>
          </div>

          <!-- 调整操作按钮容器 -->
          <div class="card-actions">
            <el-button
              size="mini"
              type="text"
              @click="openEditDialog(v.imageId, v.name)"
              class="edit-btn"
            >编辑</el-button>
            <el-button
              size="mini"
              type="text"
              @click="del(v.imageId)"
              class="delete-btn"
            >删除</el-button>
          </div>
        </li>
      </ul>
    </div>
    <!-- 编辑对话框 -->
    <el-dialog
      title="编辑图片名称"
      :visible.sync="editDialogVisible"
      width="400px"
    >
      <el-input v-model="newImageName" placeholder="请输入新图片名称"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editImageName">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 放置新增图片弹层 -->
    <el-dialog width="500px" title="新增图片" :visible.sync="showDialog" @close="btnCancel">
      <div class="image-uploader">
        <input type="file" accept="image/*" @change="onFileChange">
        <button :disabled="!selectedFile" @click="uploadImage">上传图片</button>
        <div v-if="imageUrl" class="preview-container">
          <h3>图片预览：</h3>
          <img :src="imageUrl" alt="Image Preview" class="preview-image">
        </div>
      </div>
    </el-dialog>
    <!-- 添加放大对话框 -->
    <el-dialog
      :visible.sync="zoomDialogVisible"
      :show-close="false"
      width="90%"
      top="5vh"
      custom-class="zoom-dialog"
      @close="currentZoomImage = ''"
    >
      <div class="zoom-container" @click.self="zoomDialogVisible = false">
        <img
          :src="currentZoomImage"
          alt="放大图片"
          class="zoomed-image"
        >
      </div>
    </el-dialog>
  </div>

</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      // 新增放大相关状态
      zoomDialogVisible: false,
      currentZoomImage: '',
      // 新增编辑相关状态
      editDialogVisible: false,
      currentImageId: '',
      newImageName: '',
      showDialog: false, // 控制弹层显示隐藏
      selectedFile: null,
      imageUrl: null,
      pic_list: []
    }
  },
  created() {
    this.getPicList()
  },
  methods: {
    // 新增图片放大处理
    handleZoom(imageUrl) {
      this.currentZoomImage = imageUrl
      this.zoomDialogVisible = true
    },
    // 打开编辑对话框
    openEditDialog(imageId, currentName) {
      this.currentImageId = imageId
      this.newImageName = currentName
      this.editDialogVisible = true
    },
    // 编辑图片名称
    async editImageName() {
      if (!this.newImageName.trim()) {
        this.$message.warning('请输入有效的图片名称')
        return
      }

      try {
        const url = `http://127.0.0.1:8080/rs-images/update-name?imageId=${this.currentImageId}&imageName=${encodeURIComponent(this.newImageName)}`
        const response = await axios.put(url)

        if (response.data.code === '0') {
          this.$message.success('修改成功')
          this.getPicList()
          this.editDialogVisible = false
        } else {
          this.$message.error('修改失败')
        }
      } catch (error) {
        this.$message.error('修改失败')
      }
    },
    async getPicList() {
      try {
        // 获取图片数据
        const response = await axios.get('http://localhost:8080/rs-images/getAll')
        console.log('查询图片的response.data = ', response.data)
        if (response.data.code === '0') {
          this.pic_list = response.data.data
        } else {
          // 查询失败
          this.$message.success('查询图片失败')
        }
      } catch (error) {
        this.$message.success('查询图片失败')
      }
    },
    onFileChange(event) {
      const file = event.target.files[0]
      if (file) {
        this.selectedFile = file
        // 使用 FileReader API 生成图片预览
        const reader = new FileReader()
        reader.onload = (e) => {
          this.imageUrl = e.target.result
        }
        reader.readAsDataURL(file)
      }
    },
    async uploadImage() {
      const formData = new FormData()
      formData.append('image', this.selectedFile)
      try {
        // 获取图片数据
        const response = await axios.post('http://localhost:8080/rs-images/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        console.log('上传图片的response.data = ', response.data)
        if (response.data.code === '0') {
          this.getPicList()
        } else {
          // 查询失败
          this.$message.success('上传图片失败')
        }
      } catch (error) {
        this.$message.success('上传图片失败')
      }
      this.showDialog = false
      this.imageUrl = null
      this.selectedFile = null
    },
    btnCancel() {
      this.showDialog = false
      this.imageUrl = null
      this.selectedFile = null
    },
    async del(imageId) {
      const formData = new FormData()
      formData.append('imageId', imageId)
      try {
        const response = await axios.delete('http://localhost:8080/rs-images/delete?imageId=' + imageId, formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        console.log('del图片的response.data = ', response.data)
        if (response.data.code === '0') {
          this.getPicList()
          this.$message.success('删除图片成功')
        } else {
          this.$message.success('删除图片失败')
        }
      } catch (error) {
        this.$message.success('删除图片失败')
      }
    }
  }
}
</script>

<style scoped>
/* 给图片添加点击手势 */
.pic {
  cursor: zoom-in;
  transition: transform 0.3s;
}

.pic:hover {
  transform: scale(1.02);
}

/* 放大对话框样式 */
:deep(.zoom-dialog) {
  margin: 0 !important;
  background: rgba(0, 0, 0, 0.85);

  .el-dialog__header {
    display: none;
  }

  .el-dialog__body {
    padding: 0;
    height: 90vh;
  }
}

.zoom-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px;
}

.zoomed-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-out;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.3);
}
/* 修复图片名称显示问题 */
.image-item {
  width: 240px;
  height: auto; /* 改为自适应高度 */
  margin: 10px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column; /* 垂直排列 */
}

.pic-container {
  position: relative;
  flex: 1;
}

.pic {
  height: 180px;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pic img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.image-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255,255,255,0.9);
  padding: 8px 12px;
  font-size: 14px;
  color: #606266;
  border-top: 1px solid #ebeef5;
}

/* 修复按钮显示问题 */
.card-actions {
  padding: 12px;
  background: #fff;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid #ebeef5;
}

.delete-btn,.edit-btn {
  padding: 4px 8px !important; /* 强制按钮内边距 */
  margin: 0 !important; /* 移除默认边距 */
}
/* 优化图片卡片样式 */
.image-item {
  width: 240px;
  height: 280px;
  margin: 10px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

.image-item:hover {
  transform: translateY(-5px);
}

.card-content {
  padding: 12px;
  background: #fff;
}

.txt {
  font-size: 14px;
  color: #606266;
  margin-bottom: 12px;
  line-height: 1.5;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.action-group {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.delete-btn {
  color: #f56c6c;
}

.delete-btn:hover {
  color: #f78989;
}

.edit-btn {
  color: #409eff;
}

.edit-btn:hover {
  color: #66b1ff;
}

/* 调整图片比例 */
.pic {
  position: relative;
  height: 180px;
  background: #f5f7fa;
}

.pic img {
  object-fit: contain;
}

/* 优化列表布局 */
.image-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  padding: 0;
}

/* 调整上传按钮样式 */
.image-uploader button {
  margin-top: 12px;
  padding: 8px 16px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.image-uploader button:disabled {
  background: #a0cfff;
  cursor: not-allowed;
}
</style>
